<template>
  <div class="page-container">
    <div class="security-card security-card-div">
      <div>
        <h1>学 生 课 时 充 值</h1>
      </div>

      <div class="security-card">
        <!-- 步骤条 -->
        <div class="step-header">
          <div :class="['step-item', step >= 1 ? 'active' : '']">1. 验证密码</div>
          <div :class="['step-item', step >= 2 ? 'active' : '']">2. 输入充值课时</div>
          <div :class="['step-item', step >= 3 ? 'active' : '']">3. 完成</div>
        </div>

        <!-- 第一步：验证密码 -->
        <div v-if="step === 1" class="step-content">
          <el-form :model="form" ref="passwordForm" label-width="120px">
            <InputField class="input-diy" type="password" v-model="form.currentPassword" label="请输入当前密码"/>
            <div class="btn-group">
              <el-button type="primary" size="medium" @click="validatePassword">下一步</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第二步：输入充值课时 -->
        <div v-if="step === 2" class="step-content">
          <el-form :model="form" ref="courseForm" label-width="120px">
            <InputField class="input-diy" type="number" v-model.number="form.courseHours" label="请输入充值课时"/>
            <div class="tip-text">最少充值0.01课时，最多充值10,000课时</div>

            <!-- 显示充值金额 -->
            <div v-if="form.courseHours" class="amount-info">
              <span class="amount">可支配课时扣除 {{ form.courseHours }} 个课时</span>
              <div class="price-note">友情提示：系统使用“分钟”结算，1 课程 = 60
                分钟，如果你的每课时单位不是60分钟，请注意汇算！
              </div>
            </div>

            <div class="btn-group">
              <el-button type="primary" size="medium" @click="rechargeCourse">确认充值</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第3步：成功提示 -->
        <div v-if="step === 3" class="step-content success-content">
          <i class="fa-solid fa-circle-check success-icon"></i>
          <div class="success-text">课时充值成功！</div>
          <div class="success-detail">
            您已成功充值 <span class="highlight">{{ form.courseHours }}</span> 课时
          </div>
          <div class="success-detail">
            账户当前总课时：<span class="highlight">{{ totalCourseHours }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { verifyPassword } from '@/api/user'
import { recharge, pullCurrentCourseHours } from '@/api/student'
import InputField from '@/views/component/InputField.vue'
import { getPublicKey } from '@/api/commonApi'
import RsaUtil from '@/utils/rsa-util'

export default {
  components: { InputField },
  props: {
    student: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      step: 1,
      publicKey: '',
      totalCourseHours: 0, // 当前总课时
      form: {
        currentPassword: '',
        courseHours: null
      }
    }
  },
  created() {
    getPublicKey().then(res => {
      this.publicKey = res
    })

    // 模拟获取当前课时
    this.getCurrentCourseHours()
  },
  methods: {
    async validatePassword() {
      if (!this.form.currentPassword) {
        this.$notify.error({ title: '验证失败', message: '请输入当前密码' })
        return
      }

      // 密码验证
      try {
        const rsa = new RsaUtil(this.publicKey)
        const res = await verifyPassword({ password: rsa.encrypt(this.form.currentPassword) })
        if (res) {
          this.step = 2
        } else {
          this.$notify.error({ title: '验证失败', message: '密码错误' })
        }
      } catch (error) {
        this.$notify.error({ title: '验证失败', message: '验证过程出错，请重试' })
      }
    },

    // 模拟获取当前课时的假接口
    async getCurrentCourseHours() {
      try {
        // 模拟返回数据
        this.totalCourseHours = await pullCurrentCourseHours({ id: this.student.id }) // 假设当前有15课时
      } catch (error) {
        this.$notify.error({ title: '获取失败', message: '获取当前课时失败，请重试' })
      }
    },

    // 课时充值的假接口
    async rechargeCourse() {
      // 验证课时输入
      if (this.form.courseHours === null || this.form.courseHours === '') {
        this.$notify.error({ title: '输入错误', message: '请输入充值课时' })
        return
      }

      if (!Number.isFinite(this.form.courseHours) || this.form.courseHours < 0.01 || this.form.courseHours > 10000) {
        this.$notify.error({ title: '输入错误', message: '课时必须为0.01-10000之间的数值' })
        return
      }

      try {
        await recharge({
          id: this.student.id,
          remainingClassHours: this.form.courseHours
        })

        // 模拟充值成功，更新总课时
        this.totalCourseHours = this.totalCourseHours * 1 + this.form.courseHours * 1

        this.$notify.success({ title: '充值成功', message: `已成功充值${this.form.courseHours}课时` })
        this.step = 3
      } catch (error) {
        this.$notify.error({ title: '充值失败', message: '课时充值过程出错，请重试' })
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.security-card {
  width: 100%;
  max-width: 960px;
  padding: 24px;
  border-radius: 16px;
}

.security-card-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
}

.step-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.step-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 12px;
  background-color: #f5f5f5;
  color: #666;
  font-weight: 500;
  position: relative;
}

.step-item.active {
  background-color: #0084ff;
  color: #fff;
}

.step-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0084ff;
}

.step-content {
  margin-top: 16px;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.tip-text {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  padding-left: 23px;
}

.amount-info {
  margin-top: 16px;
  color: #333;
}

.amount {
  color: #f56c6c;
  font-weight: bold;
}

.price-note {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.input-diy {
  margin: 0
}

.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 60px;
  color: #00b578;
  margin-bottom: 16px;
}

.success-text {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.success-detail {
  margin: 8px 0;
  color: #666;
}

.highlight {
  color: #0084ff;
  font-weight: bold;
}
</style>
